<template>
  <!-- 人员管理 -->
  <div class="main">
    <div class="left">
      <div class="title">
        <p>建设信息</p>
      </div>
      <div class="cent">
        <div style="padding: 24px">
          <div class="scoll2">
            <div class="mb_24">
              <p class="aaf">工程造价</p>
              <p class="aafv">
                <span class="f28">2.13</span>亿
              </p>
            </div>
            <div class="mb_24">
              <p class="aaf">开竣工时间</p>
              <p class="aafv">2020年12月31日~2023年9月30日</p>
            </div>
            <div class="mb_24">
              <p class="aaf">建设单位</p>
              <p class="aafv">徐州地铁集团有限公司</p>
            </div>

            <div class="mb_24">
              <p class="aaf">设计单位</p>
              <p class="aafv">中铁第五勘察设计院集团有限公司</p>
            </div>
            <div class="mb_24">
              <p class="aaf">监理单位</p>
              <p class="aafv">北京中城建设监理有限公司</p>
            </div>
            <div class="mb_24">
              <p class="aaf">施工单位</p>
              <p class="aafv">中交隧道工程局有限公司</p>
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <p>项目简介</p>
      </div>
      <div class="cent">
        <!-- <div id="container2"></div> -->
        <div style="padding: 24px">
          <div class="scoll2">
            中交隧道工程局有限公司承建的徐州市城市轨道交通6号线一期工程SGTJ6101标，施工范围包括铜山副中心站和黄山路站~铜山副中心站区间，共计一站一区间；施工内容包含车站主体及出入口接口、风亭风道及冷却塔等附属结构、黄山路站～铜山副中心站盾构区间主体结构及联络通道等附属结构；
            徐州市城市轨道交通6号线一期工程SGTJ6101标铜山副中心站位于湘江路与北京南路交叉口处，为地铁3号线与6号线一期的换乘站，其中3号线主体结构和预留节点已实施完成，节点位置已预留梁柱接驳条件，6号线车站施工时，3号线车站已运营，为保障3号线正常运营，3号线车站已预留临时封堵墙来满足。3号线车站为3层岛式车站，6号线为14m站台地下两层双柱三跨岛式车站，采用矩形框架结构形式。主体结构采用明挖顺做法（局部盖挖）施工，车站起点里程为右ck16+153.246，车站终点里程为右ck16+356.246，其中盖挖段里程为右ck16+212.246~右ck16+242.246；本站共设3个出入口，2组风亭，1个安全口，车站主体结构长度为203.0m，标准段宽22.7m，深17.5-21.5m，其中小里程端基坑宽27.2m，深约20.2m，大里程端头宽27.2m，深约21.0m。车站覆土厚度约3.0-4.0m，现状地面标高33.356~34.26m，车站底板位于11-2-3h中风化灰岩（局部8a-3p闪长斑岩）。车站两端头均为盾构接收。
            黄山路站～铜山副中心站区间从黄山路站引出后沿湘江路向东行进，下穿南京路过街天桥，继续向东过上海路路口后到达铜山副中心站。本区间采用盾构法施工，隧道结构为分离式单洞单线圆形断面结构形式，隧道起终点里程为：CK15+332.810~CK16+153.246，左线长820.431m，右线长820.436m，区间隧道总长：820.434（双延米），线间距12～17m，拱顶覆土厚度约10.5~18m。区间于右CK15+745.063处设置一座联络通道兼泵房，联络通道采用全断面开挖施工。
          </div>
        </div>
        <!-- <div class="cent">
                    <div class="p16">
                        <div class="zhfx" v-for="(item,index) in reasonsList" :key="index">
                            <p class="zhTest">
                                {{ item.type }}
                                <span style="float:right">{{ item.count }}人</span>
                            </p>
                            <div class="bgaa">
                                <p class="zhTest1" :style="{ width: 1.25 * item.count + 'px' }"></p>
                            </div>
                        </div>
                    </div>
        </div>-->

        <!-- <div id="container122"></div> -->
      </div>
      <div class="title">
        <p>人员管理</p>
      </div>
      <div class="cent">
        <!-- <div id="container2"></div> -->

        <div class="p24">
          <div class="ppptop">
            <p class="aaf" style="line-height: 76px;">今日出勤</p>
            <p
              class="f28 blueText"
              style="  font-size: 28px;
line-height: 76px;

  margin: 0px 45px 0px 24px;"
            >160人</p>
            <p class="aaf" style="line-height: 76px;">今日出勤率</p>
            <p
              class="aop f28"
              style="  font-size: 28px;
line-height: 76px;

  margin: 0px 0px 0px 24px;"
            >46%</p>
          </div>

          <div class="zhfx" v-for="(item,index) in reasonsList" :key="index">
            <p class="zhTest">
              {{ item.process_name }}
              <!-- <span style="float:right">{{ item.count }}次</span> -->
            </p>
            <p class="zhTest1" :style="{ width: 26 * item.count + 'px' }"></p>
          </div>
        </div>

        <!-- <div id="container122"></div> -->
      </div>
      <!-- <div class="title">
                <p>隐患类型分析</p>
            </div>
            <div class="cent">
                
      </div>-->
    </div>
    <div class="centent">
      <div class="title" style="visibility: hidden;">
        <p>人员管理趋势</p>
      </div>
      <div class="cent2" style="  position: relative;margin-bottom:30px">
        <!-- <div id="container10"></div> -->

        <video
          class="vid"
          src="https://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/ztsjxcp.mp4"
          type="video/mp4"
          controls="controls"
          autoplay="autoplay"
        ></video>
      </div>
      <!-- <div class="bl">
                <div class="c2">
                    所有问题
                    <span class="c4">{{ arrly.CountAll }}个</span>
                </div>
                <div class="c2">
                    已整改
                    <span class="c4">{{ arrly.CountYZG }}个</span>
                </div>
                <div class="c2">
                    未整改
                    <span class="c4">{{ arrly.CountWZG }}个</span>
                </div>
                <div class="c2">
                    逾期未整改比例
                    <span
                        class="c4"
                    >{{ (arrly.CountWZG / arrly.CountAll * 100).toFixed(2) }}%</span>
                </div>
      </div>-->
      <div class="aaaaaaaa" style="  margin-right: 24px;">
        <div class="title" style>
          <p>里程碑</p>
        </div>

        <div class="cent4">
          <!-- <div id="container4" style="padding: 0px 150px;"></div> -->
          <!-- <div id="container3"></div> -->

          <hr class="hrr" />
          <div style="padding:16px 24px">
            <div class="scoll1">
              <div style="text-align: left;" :style="{ width: 120 * liCheng.length + 'px' }">
                <div
                  v-for="(item, index) in liCheng"
                  :key="index"
                  style="display:inline-block;position: relative;"
                >
                  <div class="bco" :style="{ left: 130 * index + 'px' }">
                    <p class="nowra">{{ item.projectName }}</p>
                    <div class="yellow1"></div>
                    <p class="nowra">{{ item.projectTime }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="aaaaaaaa">
        <div class="title">
          <p>进度管理</p>
        </div>
        <div class="cent4">
          <!-- <div id="container6"></div> -->
          <div style="padding:42px 24px;">
            <div style="display:flex;padding:0px 12px;">
              <div class="cl" style="width: 33.3%;">
                <div class="aop">{{ sum }}亿元</div>
                <div class="grayText">总产值</div>
              </div>
              <div class="cc" style="width: 33.3%;">
                <el-progress
                  type="circle"
                  :width="60"
                  :show-text="false"
                  :stroke-width="6"
                  :percentage="parseInt((chanZ.sumValueAll / sum * 100))"
                ></el-progress>
              </div>

              <div class="cr" style="width: 33.3%;">
                <div class="blueText">{{ (chanZ.sumValueAll / sum * 100).toFixed(2) }}%</div>
                <div class="grayText appl">当前已完成</div>
              </div>
            </div>
            <div style="padding:16px 24px;display:flex">
              <div style="width: 33.3%;" class="cl">
                <div class="aopp">{{ chanZ.sumValueMonth }}亿元</div>
                <div class="grayText">上月产值</div>
              </div>
              <div style="width: 33.3%;" class="cl">
                <div class="aopp">{{ chanZ.sumValueQuarter }}亿元</div>
                <div class="grayText">本季度</div>
              </div>
              <div style="width: 33.3%;" class="cl">
                <div class="aopp">{{ chanZ.sumValueAll }}亿元</div>
                <div class="grayText">当前累计产值</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="title">
        <p>安全管理</p>
      </div>
      <div class="cent">
        <div id="container3"></div>
        <!-- <div class="jinduC"> -->
        <!-- <div v-for="(item,index) in tableList" :key="index" class="flex">
                            <div class="blueFont2 mt24">{{ item.plan_time }}</div>
                            <div class="blueFont2">{{ item.description }}</div>
                            <div class="blueFont2">
                                <img :src="oss + item.url" alt srcset width="100px" height="80px" />
        </div>-->
        <!-- <div>
                                <div class="aaa">
                                    <div class="time">计划：{{ item.start_time }}~{{ item.end_time }}</div>
                                    <div
                                        class="time"
                                    >实际：{{ item.start_time }}~{{ item.practical_time ? item.practical_time : '暂无' }}</div>
                                </div>
        </div>-->
        <!-- </div> -->
        <!-- </div> -->
      </div>

      <div class="title">
        <p>质量管理</p>
      </div>
      <div class="cent">
        <div id="container2"></div>
        <!-- <div class="zhfx" v-for="(item,index) in reasonsList" :key="index">
                        <p class="zhTest">
                            {{ item.process_name }}
                            <span style="float:right">{{ item.count }}次</span>
                        </p>
                        <p class="zhTest1" :style="{ width: 26 * item.count + 'px' }"></p>
        </div>-->
      </div>

      <div class="title">
        <p>环境管理</p>
      </div>
      <div class="cent">
        <div style="display:flex">
          <div id="schart2"></div>
          <div style="position: relative;left: -40px;top:70px;  color: #ffffff;">
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">PM2.5</p>
              <p
                style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
              >
                {{
                  tianqi.pm25
                }}
                <span
                  class="float_right"
                >{{ tianqi.pm25_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="10"
                :percentage="tianqi.pm25"
              ></el-progress>
            </div>
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">PM10</p>
              <p
                style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
              >
                {{
                  tianqi.pm10
                }}
                <span
                  class="float_right"
                >{{ tianqi.pm10_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="10"
                :percentage="tianqi.pm10"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",

      url: "",
      jindu: "",
      reasons: "",
      reasonsList: "",
      reasonsAll: "",
      liCheng: "",
      chanZ: "",
      sum: "",
      pro: 0,
      videoShow: false,
      arrly: "",
      tableList: "",
      tianqi: ""
    };
  },
  created() { },
  mounted() {
    this.$axios
      .get(
        "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101190801"
      )
      .then((res) => {
        this.tianqi = res.data;
        this.analysis[5].number = res.data.so2 + "ug/m³";
        this.analysis[11].number = res.data.o3 + "ug/m³";
      })
      .catch(() => { });
    this.$api
      .JkTokenFindJkToken({
        section_id: localStorage.getItem("section_id"),
      })
      .then((res) => {
        localStorage.setItem("videoToken", res.data);

      });
    // 进度对比
    this.$api
      .count_PCComparison({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data;
        for (let i = 0; i < data.length; i++) {

          data[i].jihua = data[i].jihua.split(',');
          data[i].shiji = data[i].shiji.split(',');

        }
        // console.log(data)
        this.jindu = data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });


    // 总数
    this.$api
      .LagReasonsCountLagReasonsAll({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data;

        // console.log(data)
        this.reasonsAll = data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });


    // 里程碑
    this.$api
      .PlanMilestoneselectPlanMilestone({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data.data;

        // console.log(data)
        this.liCheng = data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });


    // 滞后分析

    this.$api
      .LagReasonsCountLagReasons({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data.data;

        // console.log(data)
        this.reasons = data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });

    // 里程碑

    // 产值 ValueRecordValueRecordCount

    this.$api
      .ValueRecordValueRecordCount({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data;

        // console.log(data)
        this.chanZ = data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });

    this.$api
      .ValueZSumValue({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data.data[0].altogether;

        // console.log(data)
        this.sum = data;

        // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
      })
      .catch((error) => {
        console.log("错误:", error);
      });
    this.$api
      .riskshowFindRiskshowByNew({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        let data = res.data;

        // console.log(data)

        this.url = data.url.substr(1, data.url.length - 2);
        // this.sum = data;

        // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
      })
      .catch((error) => {
        console.log("错误:", error);
      });


    this.$api
      .count_PCCountRiskshowByProcessId({
        section_id: localStorage.getItem("section_id")
        // section_id: 2
      })
      .then((res) => {
        let data = res.data.data
        console.log(data)

        this.reasonsList = data
      })
      .catch((error) => {
        console.log("错误:", error);
      });


    // 表格
    this.schart1();


    this.chanZhi();
    this.chanZhi1();
    this.chanZhi2();
    this.chanzhi3();
    this.zgfx();
    this.bingtu();
    this.bingtu1();
    this.aff();

  },
  methods: {
    schart1() {
      this.$axios
        .get(
          "https://www.tianqiapi.com/api?version=v1&appid=53622763&appsecret=NFgVUwV2&cityid=101220101"
        )
        .then((res) => {
          var data5 = res.data.data[0].air;
          var data6 = res.data.data[0].air_level;
          this.tq9 = res.data.data[0].air;
          this.tq3 = res.data.data[0].air_level;
          let myChart1 = echarts.init(document.getElementById("schart2"));
          let option1 = {
            title: {
              //   top: 20,
              left: "center",
              //   text: "空气质量指数",
              textStyle: {
                //  padding: 5,				// 提示框浮层的文本样式。...
                color: "#BDEDF4",
              },
            },
            // backgroundColor: "#000",
            tooltip: {
              // 本系列特定的 tooltip 设定。
              show: true,
              formatter: "{b}：{c}%",
              backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              borderColor: "#fff", // 提示框浮层的边框颜色。...
              borderWidth: 10, // 提示框浮层的边框宽。...
              padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
              textStyle: {
                // 提示框浮层的文本样式。...
                // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
              },
            },

            series: [
              {
                name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge", // 系列类型
                radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45, // 仪表盘结束角度,默认 -45
                clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。

                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                  lineStyle: {
                    // 仪表盘轴线样式。
                    color: [
                      [0.125, "#3EFF25"],
                      [0.25, "#E1FF22"],
                      [0.375, "#FFD228"],
                      [0.5, "#FFA337"],
                      [0.75, "#FF4B00"],
                      [1, "red"],
                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 30, //轴线宽度,默认 30。
                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                  },
                },

                splitLine: {
                  // 分隔线样式。
                  show: false, // 是否显示分隔线,默认 true。
                  length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                  lineStyle: {
                    // 分隔线样式。
                    color: "#aaa", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 2, //线度,默认 2。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: "#ccc", //阴影颜色。支持的格式同color。
                  },
                },

                axisTick: {
                  // 刻度(线)样式。
                  show: false, // 是否显示刻度(线),默认 true。
                  splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                  length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                  lineStyle: {
                    // 刻度线样式。
                    color: "#eee", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1, //线度,默认 1。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                  },
                },

                axisLabel: {
                  // 刻度标签。
                  show: false, // 是否显示标签,默认 true。
                  distance: 10, // 标签与刻度线的距离,默认 5。
                  color: "#fff", // 文字的颜色,默认 #fff。
                  fontSize: 15, // 文字的字体大小,默认 5。
                  formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },

                pointer: {
                  // 仪表盘指针。
                  show: false, // 是否显示指针,默认 true。
                  length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                  width: 5, // 指针宽度,默认 8。
                },

                itemStyle: {
                  // 仪表盘指针样式。
                  color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
                  opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                  borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                  // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                  // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                },

                title: {
                  // 仪表盘标题。
                  show: true, // 是否显示标题,默认 true。
                  offsetCenter: [0, 0], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "#3EFF25", // 文字的颜色,默认 #333。
                  fontSize: 15,
                  fontWeight: 15, // 文字的字体大小,默认 15。
                },

                data: [
                  {
                    name: data6,
                    value: data5,
                  },
                ],
              },
            ],
          };

          myChart1.setOption(option1);
          window.addEventListener("resize", () => {
            myChart1.resize();
          });
        });
    },

    // bingtu
    // 安全管理
    bingtu() {

      // count_App/CountQualityshowByRiskId 

      // count_App/CountQualityshowByRiskId

      this.$api
        .count_AppCountRiskshowByRiskId({ section_id: localStorage.getItem("section_id") }).then((res) => {
          let data = res.data.data;

          //  const data = [
          //             { item: '事例一', count: 40, percent: 0.4 },
          //             { item: '事例二', count: 21, percent: 0.21 },
          //             { item: '事例三', count: 17, percent: 0.17 },
          //             { item: '事例四', count: 13, percent: 0.13 },
          //             { item: '事例五', count: 9, percent: 0.09 },
          //         ];




          let sum = 0;
          for (let i = 0; i < data.length; i++) {
            // data[i].percent = 0.04;
            // data[i]
            sum += parseInt(data[i].count)
          }
          for (let i = 0; i < data.length; i++) {
            data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
            // data[i]
            data[i].percent = data[i].percent;
            // console.log(data[i].percent);
            // sum += parseInt(data[i].count)
          }
          console.log(data);
          const chart = new Chart({
            container: 'container3',
            autoFit: true,
            height: 240,
          });

          chart.coordinate('theta', {
            radius: 0.75,
          });

          chart.data(data);

          // chart.scale('percent', {
          //     formatter: (val) => {
          //         val = val * 100 + '%';
          //         return val;
          //     },
          // });

          chart.tooltip({
            showTitle: false,
            showMarkers: false,
          });
          // ${data.percent * 100}: %
          chart
            .interval()
            .position('percent')
            .color('risk_name')
            .label('percent', {
              content: (data) => {
                return `${data.risk_name}`;
              },
            })
            .adjust('stack');

          chart.interaction('element-active');

          chart.render();


        }).catch((err) => {

        })




    },

    bingtu1() {

      // count_App/CountQualityshowByRiskId 

      // count_App/CountQualityshowByRiskId

      this.$api
        .count_PCCountByStaffNation({ section_id: localStorage.getItem("section_id") }).then((res) => {
          let data = res.data;

          //  const data = [
          //             { item: '事例一', count: 40, percent: 0.4 },
          //             { item: '事例二', count: 21, percent: 0.21 },
          //             { item: '事例三', count: 17, percent: 0.17 },
          //             { item: '事例四', count: 13, percent: 0.13 },
          //             { item: '事例五', count: 9, percent: 0.09 },
          //         ];
          let sum = 0;
          for (let i = 0; i < data.length; i++) {
            // data[i].percent = 0.04;
            // data[i]
            sum += parseInt(data[i].count)
          }
          for (let i = 0; i < data.length; i++) {
            data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
            // data[i]
            data[i].percent = data[i].percent;
            // console.log(data[i].percent);
            // sum += parseInt(data[i].count)
          }
          console.log(data);
          const chart = new Chart({
            container: 'container4',
            autoFit: true,
            height: 398,
          });

          chart.coordinate('theta', {
            radius: 0.75,
          });

          chart.data(data);

          // chart.scale('percent', {
          //     formatter: (val) => {
          //         val = val * 100 + '%';
          //         return val;
          //     },
          // });

          chart.tooltip({
            showTitle: false,
            showMarkers: false,
          });
          // ${data.percent * 100}: %
          chart
            .interval()
            .position('percent')
            .color('staff_nation')
            .label('percent', {
              content: (data) => {
                return `${data.staff_nation}`;
              },
            })
            .adjust('stack');

          chart.interaction('element-active');

          chart.render();


        }).catch((err) => {

        })




    },



    aff() {
      const data = [
        { item: '事例一', count: 40, percent: 0.4 },
        { item: '事例二', count: 21, percent: 0.21 },
        { item: '事例三', count: 17, percent: 0.17 },
        { item: '事例四', count: 13, percent: 0.13 },
        { item: '事例五', count: 9, percent: 0.09 },
      ];


      this.$api
        .count_PCCountByType({ section_id: localStorage.getItem("section_id") }).then((res) => {
          let data = res.data;
          let sum = 0;
          for (let i = 0; i < data.length; i++) {
            // data[i].percent = 0.04;
            // data[i]
            sum += parseInt(data[i].count)
          }
          for (let i = 0; i < data.length; i++) {
            data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
            // data[i]
            data[i].percent = data[i].percent;
            // console.log(data[i].percent);
            // sum += parseInt(data[i].count)
          }
          // console.log(sum);
          // console.log(data);

          const chart = new Chart({
            container: 'container122',
            autoFit: true,
            height: 398,
            padding: [0, 0, 0, 0],
            appendPadding: [0, 0, 0, 0],
          });
          // 新建一个 view 用来单独渲染Annotation
          const innerView = chart.createView();
          chart.coordinate('theta', {
            radius: 0.75,
            innerRadius: 0.75,
          });

          chart.data(data);


          // chart.scale('percent', {
          //     formatter: val => {
          //         val = val * 100 + '%';
          //         return val;
          //     },
          // });

          chart.tooltip(false);

          // 声明需要进行自定义图例字段： 'item'
          chart.legend('type', {
            position: 'bottom',                                  // 配置图例显示位置
            custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
            items: data.map((obj, index) => {
              return {
                name: obj.type,                                 // 对应 itemName
                // value: obj.percent,                             // 对应 itemValue
                marker: {
                  symbol: 'circle',                             // marker 的形状
                  style: {
                    r: 5,                                       // marker 图形半径
                    fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                  },
                },                                              // marker 配置
              };
            }),
            type: {
              style: {
                fill: '#999',
              },                                               // 配置 itemValue 样式
              formatter: val => `${val}`                // 格式化 itemValue 内容
            },
          });

          chart
            .interval()
            .adjust('stack')
            .position('percent')
            .color('type')
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: element => {
                  const shape = element.shape;
                  return {
                    lineWidth: 2,
                    stroke: shape.attr('fill'),
                    strokeOpacity: shape.attr('fillOpacity'),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          chart.removeInteraction('legend-filter');
          chart.interaction('element-active');

          chart.render();

          // 监听 element 上状态的变化来动态更新 Annotation 信息
          chart.on('element:statechange', (ev) => {
            const { state, stateStatus, element } = ev.gEvent.originalEvent;

            // 本示例只需要监听 active 的状态变化
            if (state === 'active') {
              const data = element.getData();
              if (stateStatus) {
                // 更新 Annotation
                updateAnnotation(data);
              } else {
                // 隐藏 Annotation
                clearAnnotation();
              }
            }
          });

          // 绘制 annotation
          let lastItem;
          function updateAnnotation(data) {
            if (data.sub_name !== lastItem) {
              innerView.annotation().clear(true);
              innerView
                .annotation()
                .text({
                  position: ['50%', '50%'],
                  content: data.sub_name,
                  style: {
                    fontSize: 20,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetY: -20,
                })
                .text({
                  position: ['50%', '50%'],
                  // content: data.count,
                  style: {
                    fontSize: 28,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetX: -10,
                  offsetY: 20,
                })
                .text({
                  position: ['50%', '50%'],
                  // content: '台',
                  style: {
                    fontSize: 20,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetY: 20,
                  offsetX: 20,
                });
              innerView.render(true);
              lastItem = data.sub_name;
            }
          }

          // 清空 annotation
          function clearAnnotation() {
            innerView.annotation().clear(true);
            innerView.render(true);
            lastItem = null;
          }
        }).catch((err) => {

        })





    },


    // 整改情况分析
    zgfx() {


      this.$api
        .count_AppCountRiskshow({ section_id: localStorage.getItem("section_id") })
        .then((res) => {

          const data = [
            { item: '已整改', count: 40, percent: 0 },
            { item: '未整改', count: 21, percent: 0 },
            { item: '超期未整改', count: 17, percent: 0 },
            // { item: '事例四', count: 13, percent: 0.13 },
            // { item: '事例五', count: 9, percent: 0.09 },
          ];
          let arrly = res.data.data;

          // console.log(arrly)
          this.arrly = arrly;
          data[0].count = arrly.CountYZG;
          data[0].percent = (arrly.CountYZG / arrly.CountAll).toFixed(2) - 0.0001;
          // console.log(data[0].percent)
          data[1].count = arrly.CountWZG;
          data[1].percent = (arrly.CountWZG / arrly.CountAll).toFixed(2);
          data[2].count = arrly.CountCQWZG;
          data[2].percent = (arrly.CountCQWZG / arrly.CountAll).toFixed(2);


          const chart = new Chart({
            container: 'container2',
            autoFit: true,
            height: 240
          });
          // 新建一个 view 用来单独渲染Annotation
          const innerView = chart.createView();
          chart.coordinate('theta', {
            radius: 0.75,
            innerRadius: 0.75,
          });

          chart.data(data);

          chart.scale('percent', {
            formatter: val => {
              val = val * 100 + '%';
              return val;
            },
          });

          chart.tooltip(false);

          // 声明需要进行自定义图例字段： 'item'
          chart.legend('item', {
            position: 'right',                                  // 配置图例显示位置
            custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
            items: data.map((obj, index) => {
              return {
                name: obj.item,                                 // 对应 itemName
                value: obj.percent,                             // 对应 itemValue
                marker: {
                  symbol: 'square',                             // marker 的形状
                  style: {
                    r: 5,                                       // marker 图形半径
                    fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                  },
                },                                              // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: '#999',
              },                                               // 配置 itemValue 样式
              formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
            },
          });

          chart
            .interval()
            .adjust('stack')
            .position('percent')
            // .color('item')
            .color('item', ['#1A9bfe', '#FFA500', '#FF0000', '#0000FF'])
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: element => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr('fill'),
                    strokeOpacity: shape.attr('fillOpacity'),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          chart.removeInteraction('legend-filter');
          chart.interaction('element-active');

          chart.render();

          // 监听 element 上状态的变化来动态更新 Annotation 信息
          chart.on('element:statechange', (ev) => {
            const { state, stateStatus, element } = ev.gEvent.originalEvent;

            // 本示例只需要监听 active 的状态变化
            if (state === 'active') {
              const data = element.getData();
              if (stateStatus) {
                // 更新 Annotation
                updateAnnotation(data);
              } else {
                // 隐藏 Annotation
                clearAnnotation();
              }
            }
          });

          // 绘制 annotation
          let lastItem;
          function updateAnnotation(data) {
            if (data.item !== lastItem) {
              innerView.annotation().clear(true);
              innerView
                .annotation()
                .text({
                  position: ['50%', '50%'],
                  content: data.item,
                  style: {
                    fontSize: 20,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetY: -20,
                })
                .text({
                  position: ['50%', '50%'],
                  content: data.count,
                  style: {
                    fontSize: 28,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetX: -10,
                  offsetY: 20,
                })
                .text({
                  position: ['50%', '50%'],
                  content: '个',
                  style: {
                    fontSize: 20,
                    fill: '#8c8c8c',
                    textAlign: 'center',
                  },
                  offsetY: 20,
                  offsetX: 20,
                });
              innerView.render(true);
              lastItem = data.item;
            }
          }

          // 清空 annotation
          function clearAnnotation() {
            innerView.annotation().clear(true);
            innerView.render(true);
            lastItem = null;
          }


          // this.chanZ = data;
        })
        .catch((error) => {
          console.log("错误:", error);
        });



    },

    // 年龄分析
    chanZhi() {
      let data = [
        {
          name: "水泥",
          sales: 8,
        },
        {
          name: "细骨料",
          sales: 5,
        },
        {
          name: "粗骨料",
          sales: 7,
        },
        {
          name: "外加剂",
          sales: 5,
        },
        {
          name: "粉煤灰",
          sales: 7,
        },
      ];

      this.$api
        .count_PCCountByStaffAge({

          section_id: 2,
          //   section_id: localStorage.getItem("section_id"),
          // 
        })
        .then((res) => {
          let resData = res.data;
          console.log(resData);
          data[0].name = resData[0].age_duan;
          data[0].sales = resData[0].count;

          data[1].name = resData[1].age_duan;
          data[1].sales = resData[1].count;

          data[2].name = resData[2].age_duan;
          data[2].sales = resData[2].count;

          data[3].name = resData[3].age_duan;
          data[3].sales = resData[3].count;

          data[4].name = resData[4].age_duan;
          data[4].sales = resData[4].count;

          // 01f2ff   2174ef  1ddbfd    2e9aff   163cc8
          const colorSet = {
            "21-30": "#47e3ff",
            "31-40": "#1885ff",
            "41-50": "#dc557b",
            "51-60": "#f0f967",
            // 粗骨料: "#484cff",
          };

          const chart = new Chart({
            container: "container1",
            height: 398,
            width: 440,
            padding: [20, 20, 20, 20]
          });

          chart.scale("sales", {
            alias: "数量", //为value字段设置别名，在tooltip显示时则显示别名
            min: 0,
          });

          chart.axis(false, {
            title: null,
          });
          chart.axis("name", true);
          chart.axis("sales", false);
          chart.data(data);
          chart.legend(false);
          chart.interaction("active-region");
          chart
            .interval()
            .position("name*sales")
            // .shape("text-interval")
            .color("name", (value) => colorSet[value]);
          // .style({
          //   radius: [20, 20, 0, 0],
          // });
          chart.render();
        });


    },


    // 区域分析
    chanZhi1() {
      let data = [
        {
          name: "水泥",
          sales: 8,
        },
        {
          name: "细骨料",
          sales: 5,
        },
        {
          name: "粗骨料",
          sales: 7,
        },
        {
          name: "外加剂",
          sales: 5,
        },
        {
          name: "粉煤灰",
          sales: 7,
        },
      ];

      this.$api
        .count_PCCountByStaffProvince({

          // section_id: 2,
          section_id: localStorage.getItem("section_id"),
          // 
        })
        .then((res) => {
          let resData = res.data;
          data = resData;
          // 01f2ff   2174ef  1ddbfd    2e9aff   163cc8
          const colorSet = {
            "安徽省": "#47e3ff",
            "山东省": "#1885ff",
            "河南省": "#dc557b",
            "湖北省": "#f0f967",
            // 粗骨料: "#484cff",
          };

          const chart = new Chart({
            container: "container5",
            height: 398,
            width: 440,
            padding: [20, 20, 20, 20]
          });

          chart.scale("count", {
            alias: "数量", //为value字段设置别名，在tooltip显示时则显示别名
            min: 0,
          });

          chart.axis(false, {
            title: null,
          });
          chart.axis("staff_province", true);
          chart.axis("count", false);
          chart.data(data);
          chart.legend(false);
          chart.interaction("active-region");
          chart
            .interval()
            .position("staff_province*count")
            // .shape("text-interval")
            .color("staff_province", (value) => colorSet[value]);
          // .style({
          //   radius: [20, 20, 0, 0],
          // });
          chart.render();
        });


    },

    // 工种分析

    chanZhi2() {
      let data = [
        {
          name: "水泥",
          sales: 8,
        },
        {
          name: "细骨料",
          sales: 5,
        },
        {
          name: "粗骨料",
          sales: 7,
        },
        {
          name: "外加剂",
          sales: 5,
        },
        {
          name: "粉煤灰",
          sales: 7,
        },
      ];

      this.$api
        .count_PCCountByWorktype({

          // section_id: 2,
          section_id: localStorage.getItem("section_id"),
          // 
        })
        .then((res) => {
          let resData = res.data;
          data = resData;
          // 01f2ff   2174ef  1ddbfd    2e9aff   163cc8
          const colorSet = {
            "安徽省": "#47e3ff",
            "山东省": "#1885ff",
            "河南省": "#dc557b",
            "湖北省": "#f0f967",
            // 粗骨料: "#484cff",
          };

          const chart = new Chart({
            container: "container6",
            height: 398,
            width: 460,
            padding: [20, 20, 20, 20]
          });

          chart.scale("count", {
            alias: "数量", //为value字段设置别名，在tooltip显示时则显示别名
            min: 0,
          });

          chart.axis(false, {
            title: null,
          });
          chart.axis("worktype_name", true);
          chart.axis("count", false);
          chart.data(data);
          chart.legend(false);
          chart.interaction("active-region");
          chart
            .interval()
            .position("worktype_name*count")
            // .shape("text-interval")
            .color("worktype_name", (value) => colorSet[value]);
          // .style({
          //   radius: [20, 20, 0, 0],
          // });
          chart.render();
        });


    },

    // 管理人员趋势
    chanzhi3() {
      this.$api
        .count_PCStaffQs({ section_id: localStorage.getItem("section_id") })
        .then((res) => {
          let data = res.data;

          // console.log(data);

          // console.log(data)
          const chart = new Chart({
            container: 'container10',
            autoFit: true,
            height: 398,
            padding: [30, 20, 70, 30]
          });

          chart.data(data);
          chart.scale({
            value: {
              min: 0,
              max: 5,
              alias: "实际产值"
            },
            // planValue: {
            //     min: 0,
            //     max: 10,
            //     alias: "计划产值"
            // }
          });



          chart.tooltip({
            showCrosshairs: false,
            shared: true,
          });


          // chart.label('monthValue', (xValue) => {
          //         return {
          //             content: xValue + '%',
          //         };
          //     });

          chart.axis(true);  // 是否显示坐标轴
          // chart.axis('nlp', false);

          // chart.legend({
          //     custom: true,
          //     items: [
          //         { name: '实际产值', value: 'value', marker: { symbol: 'line', style: { stroke: '#51EDE4', lineWidth: 2 } } },
          //         // { name: '计划产值', value: 'planValue', marker: { symbol: 'line', style: { stroke: '#1A9BFE', lineWidth: 2 } } },
          //     ],
          //     // itemFormatter() {
          //     //     return val; // val 为每个图例项的文本值
          //     // }
          // });

          // chart.legend(false); 
          //{数据源名称：替换的名称}
          // chart.legend('monthValue', {
          //     itemFormatter(val) {
          //         return "1234"; // val 为每个图例项的文本值
          //     }
          // });





          chart.line().position('month*value').color('#51EDE4').shape('smooth');;
          // chart.line().position('time*planValue').color('#1A9BFE').shape('smooth');;
          chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
          chart.render();
        })
        .catch((error) => {
          console.log("错误:", error);
        });
    }



  },
};
</script>
<style src="./css/page01.css" scoped>
</style>
